import { InjectionKey, computed } from 'vue';
import { RouterView, useRoute } from 'vue-router';
import { useExpandProcessStore } from '@/store/expand-process';
import { isApp } from '@/utils/is';
import { useVitalFormImportantConfigProvider } from 'vital';
import { MciTabPane, MciTabs } from '@/components/base';
import { sendWebviewLoadendMessage } from './utils';
import MobileFooter from '@/components/business/Approval/components/MobileFooter';
import { APPLY_PAYMENT } from '@/router/routes/matter/utils';
import { AppToTop } from '@/components/business/AppToTop';

const envKey = 'appEnv' as unknown as InjectionKey<'app' | 'mini' | ''>;
const mobileApproveTab = 'mobileApproveTab' as unknown as InjectionKey<{
  active: 'approve' | 'details';
  isHideApprove: boolean;
}>;
export const useAppEnv = () => {
  const env = inject(envKey, '');

  return env;
};

export const useMobileApproveTab = () => {
  const env = useAppEnv();
  return {
    mobileApproveTab: inject(mobileApproveTab, { active: 'approve', isHideApprove: true }),
    isApp: env === 'app'
  };
};

export default defineComponent({
  setup() {
    const route = useRoute();

    const processInst = route.query.processInst as string;

    const showApprovalButton = computed(() => {
      const taskConfigId = route.meta.taskConfigId as string;
      /* 付款单审批 */
      return [APPLY_PAYMENT].includes(Number(taskConfigId));
    });
    /* 隐藏审批组件 */
    const isHideApprove = Boolean(route.query.isHideApprove);
    const activeTab = reactive({
      active: 'approve',
      isHideApprove
    });
    provide(mobileApproveTab, activeTab);

    const expandProcessStore = useExpandProcessStore();
    useVitalFormImportantConfigProvider({
      layout: {
        cols: 1
      }
    });
    document.body.classList.add('env-app');
    provide(envKey, isApp() ? 'app' : '');

    const investmentId = computed(() => {
      const { params, query } = route;
      /* 外层拓展流程id */
      const parentInvestmentId = params.id as string;
      /* 里层拓展流程id */
      const innerInvestmentId = query.investmentId as string;
      /* 查找当前任务对应的拓展流程， 如果有里层的 id 则判断当前为里层的拓展流程，如果里层不存在则获取外层的id */
      return innerInvestmentId || parentInvestmentId;
    });

    const isInit = ref(false);

    onMounted(async () => {
      await expandProcessStore.getInvestFlowQueryMethod(investmentId.value);
      sendWebviewLoadendMessage();
      isInit.value = true;
    });

    return () => {
      if (isHideApprove) {
        return (
          <div class={['env-app', showApprovalButton.value ? '' : 'p-12']}>
            <AppToTop />
            {isInit ? (
              showApprovalButton.value ? (
                <div class="flex flex-col justify-between h-100vh p-12 pb-68 relative">
                  <div class="flex-1 overflow-auto">
                    <RouterView />
                  </div>
                  <MobileFooter
                    class="z-3000 shrink-0 h-60 fixed bottom-16 left-0 w-full px-12"
                    processInst={processInst}
                  />
                </div>
              ) : (
                <RouterView />
              )
            ) : null}
          </div>
        );
      }
      return (
        <div class={['p-12 env-app']}>
          <AppToTop />
          <div class="bg-white h-12 sticky -mt-12  top-0 left-0 w-full z-1001"></div>
          <div class="sticky top-12 left-0 w-full bg-white z-1001 pb-4">
            <MciTabs vModel={activeTab.active}>
              <MciTabPane name="approve" label="当前审批"></MciTabPane>
              <MciTabPane name="details" label="详情"></MciTabPane>
            </MciTabs>
          </div>
          <div>{isInit.value ? <RouterView /> : null}</div>
        </div>
      );
    };
  }
});
